/**
 * Created by duanq on 2017/3/31.
 */
import React ,{Component} from 'react';
import axios from 'axios';
import { hashHistory,Link } from 'react-router';
import 'antd/dist/antd.css';
import '../../css/login.css';
import {Row, Col ,Form, Icon, Input, Button, Checkbox,Alert } from 'antd';
const FormItem = Form.Item;

class Login extends Component{
    constructor(props){
        super(props);
        this.state = {login:'info'};
    }
    handleSubmit = (e) => {
        let that = this;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });

        var url = `login`;
        var loginData = `userName=${this.props.form.getFieldValue('userName')}&password=${this.props.form.getFieldValue("password")}`;
        axios.post(url,loginData)
            .then(function (response) {
                that.setState({login:response.data});
                if(response.data == 'success'){
                    /*页面中添加已登陆标记*/
                    sessionStorage.setItem("loginFlag",true);
                    const path = `home`;
                    hashHistory.push(path);
                }else{
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    };
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <div>
                <Row type="flex" justify="center">
                    <Col span={6}>
                        <p className="login-title">登录</p>
                        <Alert message={`${this.state.login} tips`} type={this.state.login} showIcon />
                        <Form onSubmit={this.handleSubmit} className="login-form">
                            <FormItem>
                                {getFieldDecorator('userName', {
                                    rules: [{ required: true, message: 'Please input your username!' }],
                                })(
                                    <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: 'Please input your Password!' }],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('remember', {
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>Remember me</Checkbox>
                                )}
                                <a className="login-form-forgot">Forgot password</a>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    Log in
                                </Button>
                                Or <Link to="/register">register now!</Link>
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
            </div>
        );
    }
}
export const LoginForm = Form.create({})(Login);
